<template>
  <div>
    <el-container>
      <Navigation />
      <el-container>
        <el-header>
          <!-- <div>{{ this.userId }}</div> -->
          <span>
            <img :src="icon" class="userIcon" width="50px" height="auto">
            <el-tooltip effect="dark" content="退出登录" placement="left-end">
              <el-image class="exitIcon" style="width: 50px; height: auto" :src="require('../../assets/exit.png')"
                @click="dialogVisible = true"></el-image>
            </el-tooltip>
          </span>
          <el-dialog center title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span>您确定要退出登录吗</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="logout()">确 定</el-button>
            </span>
          </el-dialog>
          <!-- <img src=this.icon alt="图片未上传" /> -->
          <!-- 退出登录按钮 -->
          <!-- <el-form label-position="right" label-width="1000px" class="demo-ruleForm">
          <el-form-item> -->
          <!-- <el-image class="table-td-thumb" :src="require('../../assets/logo.png')"></el-image> -->
          <!-- <el-button type="danger" @click="logout">安全退出</el-button> -->

          <!-- </el-form-item>
        </el-form> -->
        </el-header>
        <el-main style="height: 100vh;">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Navigation from './Navigation.vue'
import axios from 'axios'
export default {
  components: { Navigation },
  name: 'Index',
  data () {
    return {
      icon: '',
      userId: '',
      dialogVisible: false
    }
  },
  mounted () {
    // alert(sessionStorage.getItem('user').userId)
    this.userId = window.sessionStorage.getItem('userId')
    this.icon = window.sessionStorage.getItem('icon')
    // this.items.name=sessionStorage.getItem("name");
    // this.userIcon = sessionStorage.getItem('user').icon
  },
  methods: {
    logout: function () {
      // 先跳转到首页，再销毁session
      this.$router.push('/')
      axios.get('http://127.0.0.1:9000/logout')
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => { })
    }
  }
}
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

/* .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  } */

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.userIcon {
  position: relative;
  text-align: right;
  display: block;
  top: -5px;
  left: 95%;
}

.exitIcon {
  position: relative;
  text-align: right;
  display: block;
  top: -5px;
  left: 95%;
}
</style>
